{extend name="common/common" /}

{block name="style"}
<style media="screen">
.sm-st {
	background: #fff;
	padding: 20px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin-bottom: 20px;
	-webkit-box-shadow: 0 1px 0px rgba(0,0,0,0.05);
	box-shadow: 0 1px 0px rgba(0,0,0,0.05);
}
.sm-st-icon {
    width: 60px;
    height: 60px;
    display: inline-block;
    line-height: 60px;
    text-align: center;
    font-size: 30px;
    background: #eee;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    float: left;
    margin-right: 10px;
    color: #fff;
}
.sm-st-info h1 {
	width: 165px;
    display: block;
    font-size: 24px;
    font-weight: 600;
}
.st-danger {
    background-color: #ed5565;
}
.st-info{
	background-color: #23c6c8;
}
.st-success{
	background-color: #337ab7;
}
.st-primary{
	background-color: #5cb85c;
}
div.row{
	min-width: 800px;
}
div.ibox-content{
	overflow: auto;
}
.span-strong{
	font-size: 14px;
}
.sm-st-icon{
	cursor:pointer;
}

</style>
{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="ibox float-e-margins">
		<div class="ibox-title">
            <h5>教务统计仪表</h5>
        </div>
		<div class="ibox-content">
			<div class="layui-collapse" lay-filter="SchoolSpecialty" lay-accordion="" style="min-width:800px;">
				<div class="layui-colla-item">
					<h2 class="layui-colla-title" data-sons="0">所有学校专业</h2>
					<div class="layui-colla-content layui-show">
						<div class="row">
							<div class="col-sm-3 col-xs-6">
								<div class="sm-st clearfix">
									<span class="sm-st-icon st-info" onclick="GoToList()">
										<i class="fa fa-users"></i>
									</span>
									<div class="sm-st-info">
										<h1 class="value1" data-rock="true" data-count="{$totalSt.a}" data-lazy="24" data-after="人">0</h1>
										<span class="span-strong span-info">学生总人数</span>
									</div>
								</div>
							</div>
							<div class="col-sm-3 col-xs-6">
								<div class="sm-st clearfix">
									<span class="sm-st-icon st-danger" onclick="GoToList('','','',1)">
										<i class="fa fa-slideshare"></i>
									</span>
									<div class="sm-st-info">
										<h1 class="value2" data-rock="true" data-count="{$totalSt.ef}" data-lazy="24" data-after="人">0</h1>
										<span class="span-strong span-danger">学籍异常人数</span>
									</div>
								</div>
							</div>
							<div class="col-sm-3 col-xs-6">
								<div class="sm-st clearfix">
									<span class="sm-st-icon st-success" onclick="GoToList('','',2,'')">
										<i class="fa fa-black-tie"></i>
									</span>
									<div class="sm-st-info">
										<h1 class="value3" data-rock="true" data-count="{$totalSt.d}"  data-lazy="24" data-after="人">0</h1>
										<span class="span-strong span-success">毕业人数</span>
									</div>
								</div>
							</div>
							<div class="col-sm-3 col-xs-6">
								<div class="sm-st clearfix">
									<span class="sm-st-icon st-primary" onclick="GoToList('','',1,'')">
										<i class="fa fa-github-alt"></i>
									</span>
									<div class="sm-st-info">
										<h1 class="value4" data-rock="true" data-count="{$totalSt.c}" data-lazy="24" data-after="人">0</h1>
										<span class="span-strong span-primary">在读人数</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- end of total -->
				{volist name="$iTitle" id="v"}
				<div class="layui-colla-item">
					<h2 class="layui-colla-title" data-sons="{$v.id}">{$v.school_name}-{$v.major_name}</h2>
					<div class="layui-colla-content">
						<div class="row">
							<div class="col-sm-3 col-xs-6">
								<div class="sm-st clearfix">
									<span class="sm-st-icon st-info" onclick="GoToList('{$v.school_name}','{$v.major_name}');">
										<i class="fa fa-users"></i>
									</span>
									<div class="sm-st-info">
										<h1 class="value_a{$v.id}" data-rock="true" data-count="{$v.majorSt_a}" data-lazy="24" data-after="人">0</h1>
										<span class="span-strong span-info">学生总人数</span>
									</div>
								</div>
							</div>
							<div class="col-sm-3 col-xs-6">
								<div class="sm-st clearfix">
									<span class="sm-st-icon st-danger" onclick="GoToList('{$v.school_name}','{$v.major_name}','',1)">
										<i class="fa fa-slideshare"></i>
									</span>
									<div class="sm-st-info">
										<h1 class="value_b{$v.id}" data-rock="true" data-count="{$v.majorSt_ef}" data-lazy="24" data-after="人">0</h1>
										<span class="span-strong span-danger">学籍异常人数</span>
									</div>
								</div>
							</div>
							<div class="col-sm-3 col-xs-6">
								<div class="sm-st clearfix">
									<span class="sm-st-icon st-success" onclick="GoToList('{$v.school_name}','{$v.major_name}',2,'')">
										<i class="fa fa-black-tie"></i>
									</span>
									<div class="sm-st-info">
										<h1 class="value_c{$v.id}" data-rock="true" data-count="{$v.majorSt_d}" data-lazy="24" data-after="人">0</h1>
										<span class="span-strong span-success">毕业人数</span>
									</div>
								</div>
							</div>
							<div class="col-sm-3 col-xs-6">
								<div class="sm-st clearfix">
									<span class="sm-st-icon st-primary" onclick="GoToList('{$v.school_name}','{$v.major_name}',1,'')">
										<i class="fa fa-github-alt"></i>
									</span>
									<div class="sm-st-info">
										<h1 class="value_d{$v.id}" data-rock="true" data-count="{$v.majorSt_c}" data-lazy="24" data-after="人">0</h1>
										<span class="span-strong span-primary">在读人数</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				{/volist}
			</div><!-- end of 手风琴 -->
		</div>
	</div><!-- end of 统计仪表 -->

	<div class="ibox float-e-margins">
		<div class="ibox-title">
            <h5>教务学校统计图表</h5>
        </div>
		<div class="ibox-content">
			<div id="main2" style="width: 100%;min-width:500px;"></div>
		</div>
	</div>
	<div class="ibox float-e-margins">
		<div class="ibox-title">
            <h5>教务专业统计图表</h5>
        </div>
		<div class="ibox-content">
			<div id="main1" style="width: 100%;min-width:500px;"></div>
		</div>
	</div>
</div>
<script type="text/javascript">
$(function(){
	var adminId = {$adminId};
	$.post("./statistics",{adminId:adminId},function(res){
		var schoolHeight = Number(res.schoolXdata.length) * 95 + "px";
		var majorHeight =  Number(res.Xdata.length) * 95 + "px";
		$("#main1").css({'height':majorHeight});
		$("#main2").css({'height':schoolHeight});
		var myChart = echarts.init(document.getElementById('main1'));
		var schoolChart = echarts.init(document.getElementById('main2'));
		var option = {
			title: {text: '各专业人数统计'},
			toolbox: {
				show:true,
				feature: {
					dataView: {readOnly: true},
					restore: {},
					saveAsImage: {}
				}
			},
			legend: {
				data:['报名中','学籍正常','学籍异常','正常-在读','正常-毕业','异常-休学','异常-退学']
			},
			tooltip : {
				trigger: 'axis',
				axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis : [
				{
					type : 'value',
					axisLabel: {
						formatter: '{value}人'
					},
				}
			],
			yAxis : [
				{
					type: 'category',
					data : res.Xdata,
					axisTick: {
					   alignWithLabel: true
					},
					axisLabel: {
					   interval:0,
					   rotate:30,
					},
				}
			],
			series : [
				{
					name:'报名中',
					type:'bar',
					barWidth : 20,
					color:"#B9DCED",
					barGap:0,
					data:res.Ydata.Bdata
				},
				{
					name:'学籍正常',
					type:'bar',
					barWidth : 15,
					color:"#6FB737",
					data:res.Ydata.CDdata
				},
				{
					name:'正常-在读',
					type:'bar',
					barWidth : 5,
					stack: '学籍正常',
					color:"#1E9FFF",
					data:res.Ydata.Cdata
				},
				{
					name:'正常-毕业',
					type:'bar',
					barWidth : 5,
					stack: '学籍正常',
					color:"#337ab7",
					data:res.Ydata.Ddata
				},
				{
					name:'学籍异常',
					type:'bar',
					barWidth : 15,
					color:"#ed5565",
					data:res.Ydata.EFdata
				},

				{
					name:'异常-休学',
					type:'bar',
					color:"#FFB800",
					barWidth : 5,
					stack: '学籍异常',
					data:res.Ydata.Edata
				},
				{
					name:'异常-退学',
					type:'bar',
					color:"#96582a",
					 barWidth : 5,
					stack: '学籍异常',
					data:res.Ydata.Fdata
				}
			]
		};
		var optionSchool = {
			title: {text: '各学校人数统计'},
			toolbox: {
				show:true,
				feature: {
					dataView: {readOnly: true},
					restore: {},
					saveAsImage: {}
				}
			},
			legend: {
				data:['报名中','学籍正常','学籍异常','正常-在读','正常-毕业','异常-休学','异常-退学']
			},
			tooltip : {
				trigger: 'axis',
				axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis : [
				{
					type : 'value',
					axisLabel: {
						formatter: '{value}人'
					},
				}
			],
			yAxis : [
				{

					type: 'category',
					data : res.schoolXdata,
					axisTick: {
					   alignWithLabel: true
					},
					axisLabel: {
					   interval:0,
					   rotate:30,
					},
				}
			],
			series : [
				{
					name:'报名中',
					type:'bar',
					barWidth : 20,
					color:"#B9DCED",
					barGap:0,
					data:res.schoolYdata.Bdata
				},
				{
					name:'学籍正常',
					type:'bar',
					barWidth : 15,
					color:"#6FB737",
					data:res.schoolYdata.CDdata
				},
				{
					name:'正常-在读',
					type:'bar',
					barWidth : 5,
					stack: '学籍正常',
					color:"#1E9FFF",
					data:res.schoolYdata.Cdata
				},
				{
					name:'正常-毕业',
					type:'bar',
					barWidth : 5,
					stack: '学籍正常',
					color:"#337ab7",
					data:res.schoolYdata.Ddata
				},
				{
					name:'学籍异常',
					type:'bar',
					barWidth : 15,
					color:"#ed5565",
					data:res.schoolYdata.EFdata
				},

				{
					name:'异常-休学',
					type:'bar',
					color:"#FFB800",
					barWidth : 5,
					stack: '学籍异常',
					data:res.schoolYdata.Edata
				},
				{
					name:'异常-退学',
					type:'bar',
					color:"#96582a",
					 barWidth : 5,
					stack: '学籍异常',
					data:res.schoolYdata.Fdata
				}
			]
		}
		myChart.setOption(option);
		schoolChart.setOption(optionSchool);
	})
})
</script>
{/block}

{block name="script"}
<script type="text/javascript" src="__JS__/LazyNumber.js"></script>
<script type="text/javascript">
layui.use('element', function(){
	var element = layui.element;
	//监听折叠
	element.on('collapse(SchoolSpecialty)', function(data){
		var majorId = $(this).attr('data-sons');
		$(".value_a"+majorId).numberRock();
		$(".value_b"+majorId).numberRock();
		$(".value_c"+majorId).numberRock();
		$(".value_d"+majorId).numberRock();
	});
});
$(function(){
	$(".value1").numberRock();
	$(".value2").numberRock();
	$(".value3").numberRock();
	$(".value4").numberRock();
})
function GoToList(school_name='',major_name='',school_roll='',roll_status=''){
	var url = "{:url('education/student')}?type=1";
	url += "&seaSchool="+school_name;
	url += "&seaMajor="+major_name;
	url += "&seaSchoolRoll="+school_roll;
	url += "&seaRollStatus="+roll_status;
	window.location.href=url;
}
</script>
{/block}
